<template>
  <div id="app">
    <!-- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="item in tabl" :label="item.name" :key="item.id" :name="item.id">
        <wangxiao-table1 drag row-key="id" :data="data" :columns="columns2" showColumns :frontendPaging="true"></wangxiao-table1>
          <wangxiao-table1 drag row-key="id" :data="data" :columns="columns3" showColumns :frontendPaging="true"></wangxiao-table1>
        </el-tab-pane>
      </el-tabs> -->
    <el-button @click="submitTo">提交</el-button>
    <wangxiao-table1 :data="data" :columns="tablist">
      <template #selection>
        <div>JDJDJDJDJ</div>
      </template>
    </wangxiao-table1>
    
    <wangxiao-table1
      @dragRow="dragRow"
      :key="activeName"
      drag
      row-key="id"
      :data="data"
      :columns="tablist"
      showColumns
      :frontendPaging="true"
    >
    </wangxiao-table1>

    <!-- 身份证上传-->
    <div style="display: flex; margin: 50px">
      <!-- 正面 -->
      <wangxiao-upload
        v-model="frontalView"
        id-card
        frontBack="front"
        style="margin-right: 20px; width: 406px"
        :suffixArray="['jpg', 'png', 'jpeg']"
        :multiple="false"
      ></wangxiao-upload>
      <!-- 反面 -->
      <wangxiao-upload
        v-model="reverseView"
        id-card
        frontBack="back"
        style="width: 406px"
        :suffixArray="['jpg', 'png', 'jpeg']"
        :multiple="false"
      ></wangxiao-upload>
    </div>

    <!-- 证件照上传 1311 * 453 -->
    <WangxiaoUpload
      echo="card"
      :limitPixel="{ width: 1311, height: 453 }"
      style="width: 406px"
      :suffixArray="['jpg', 'xlsx', 'png', 'jpeg']"
      :multiple="false"
    >
    </WangxiaoUpload>

    <!-- 其他文件上传 -->
    <WangxiaoUpload
      style="margin-right: 20px; width: 406px"
      prompt="jdjdjdjdjdjjd"
      :suffixArray="['jpg', 'png', 'jpeg', 'doc', 'xlsx', 'docx', 'pdf']"
      :num-files="1"
      :multiple="false"
      :automatic-upload="automaticUpload"
    >
    </WangxiaoUpload>

    <!-- 自定义上传 -->
    <wangxiao-upload
      style="width: 406px"
      :suffixArray="['jpg', 'png', 'jpeg']"
      :multiple="false"
    >
      <template #content>
        <div>自定义内容</div>
      </template>
    </wangxiao-upload>

    <!-- 侧边栏多个使用 -->
    <WangxiaoSidebar
      @chenage="handChenage"
      :activeField="activeField"
      :active="active"
      :sideList="semesterList1"
      label="names"
    />
    <div style="margin: 30px"></div>
    <WangxiaoSidebar
      @chenage="handChenage"
      :activeField="activeField"
      :active="active"
      :sideList="semesterList2"
      label="names"
    />

    <!-- 侧边栏 单个使用 -->
    <Wangxiao-sidebar :sideList="semesterList" label="names" prop="fieldName">
      <template #aaa>
        <span>自定义内容</span>
      </template>
      <template #default>追加内容</template>
    </Wangxiao-sidebar>

    <!-- 步骤条 -->
    <wangxiaoStep :count="count" :list="list">
      <template #ssd>
        <div>插槽</div>
      </template>
    </wangxiaoStep>

    <!-- card 组件 -->
    <div style="display: flex; margin: 50px">
      <wangxiaoCard type="warning" title="Card头部"> Card 内容 </wangxiaoCard>

      <wangxiaoCard type="info">
        <div slot="title">自定义Card头部</div>
        Card 内容
      </wangxiaoCard>

      <wangxiaoCard type="error"> 只有 Card 内容， 没有头部 </wangxiaoCard>

      <wangxiaoCard type="success"> 只有 Card 内容， 没有头部 </wangxiaoCard>
    </div>

    <!-- JSX 使用 -->
    <!-- <UploadJsx></UploadJsx> -->

    <!-- <wangxiao-editor></wangxiao-editor>
    <wangxiaoRender age="111111" @chenage="onChenage">
      <template #ages>
        打卡打卡打卡打卡
      </template>
    </wangxiaoRender> -->
    <!-- <el-button @click="AAAAAAAA">就的角度讲</el-button> -->
  </div>
</template>

<script>
import assblay from "./assblay";
import { data, data1, columns, columns2, columns3, tabl } from "./api";
import wangxiaoTable1 from "./components/wangxiao-table";
// import wangxiaoStep from "./components/wangxiao-step";
import WangxiaoUpload from "./components/wangxiao-upload";
import WangxiaoSidebar from "./components/wangxiao-sidebar";
// import UploadJsx from "./dddjsx";
// import wangxiaoRender from "./components/render/wangxiao-render";
export default {
  name: "App",
  components: {
    wangxiaoTable1,
    // wangxiaoStep,
    // wangxiaoRender,
    WangxiaoUpload,
    // UploadJsx,
    WangxiaoSidebar,
  },
  data() {
    return {
      imgUrl: "",
      name: "Demi",
      data,
      tabl,
      columns,
      columns2,
      columns3,
      activeName: "1",
      tablist: [],
      borderStyle: { padding: "0px" },
      semesterList: [
        {
          state: 1,
          names: "第一学期",
          fieldName: "aaa",
        },
        {
          state: 0,
          names: "第二学期",
          fieldName: "bbb",
        },
        {
          state: 0,
          names: "第三学期",
          fieldName: "ccc",
        },
        {
          state: 0,
          names: "第四学期",
          fieldName: "ddd",
        },
        {
          state: 0,
          names: "第五学期",
          fieldName: "ggg",
        },
      ],

      semesterList1: [
        {
          state: 1,
          names: "1111111第一学期",
          fieldName: "aaa",
          active: "a",
        },
        {
          state: 0,
          names: "1111111第二学期",
          fieldName: "bbb",
          active: "b",
        },
      ],

      semesterList2: [
        {
          state: 0,
          names: "222222第三学期",
          fieldName: "ccc",
          active: "c",
        },
        {
          state: 0,
          names: "222222第四学期",
          fieldName: "ddd",
          active: "d",
        },
      ],
      activeField: "active",
      active: "a",
      count: 2,
      list: [
        {
          id: 1,
          prop: "ssd",
          name: "论文选题",
        },
        {
          name: "选题审核",
          id: 2,
        },
        {
          name: "论文提交",
          id: 3,
        },
        {
          name: "论文审核",
          id: 4,
        },
        {
          name: "答辩成绩",
          id: 5,
        },
      ],
      fileList: [],
      frontalView: [],
      reverseView: [],
      initialFileList: [
        {
          url: "https://168test.oss-cn-hangzhou.aliyuncs.com/degree/2820ba7f-1c58-45f5-9341-92fb87120099.jpg",
        },
      ],
    };
  },
  watch: {
    name(val) {
      console.log(val);
    },
    activeName: {
      handler(val) {
        
        switch (val) {
          case "1":
            this.tablist = JSON.parse(JSON.stringify(columns));
            break;
          case "2":
            this.tablist = JSON.parse(JSON.stringify(columns2));
            break;
          case "3":
            this.tablist = JSON.parse(JSON.stringify(columns3));
            break;
        }

        console.log(val, this.tablist);
      },
      immediate: true,
    },
  },
  created() {
    console.log(assblay);
  },
  methods: {
    handChenage(index, item) {
      if (index === item.active) {
        console.log(index, item);
        this.active = index;
      }
    },
    submitTo() {
      console.log(this.fileList);
      this.data = JSON.parse(JSON.stringify(data1));
    },
    handleClick(tab, event) {
      this.tablist = [];
      console.log(tab, event);
      this.$forceUpdate();
    },
    dragRow(i1, i2, i3, i4, i5) {
      console.log(i1, i2, i3, i4, i5);
    },
    onChenage(item, i) {
      console.log(item, i);
    },
    AAAAAAAA() {
      document.querySelector(".upload-resource .el-upload").click();
    },
    /** 上传附件 */
    async automaticUpload(file) {
      console.log(file, "文件");
    },
  },
};
</script>
